<template>
  <div class="leftMenu">
    <!-- <img class="tip"
         src="../../../assets/menuTip.png"
         alt="">
    <div class="titleBox">
      <span class="title">{{ title }}</span>
      <span class="des">Business management</span>
    </div> -->
    <div class="top">
    <i class="el-icon-s-unfold" style="color: rgba(119,119,119,0.4667);"></i>
    </div>
    <div>
      <el-menu ref="menu"
               class="el-menu-vertical-demo"
               active-text-color="#fff"
               :unique-opened="true">
            
        <el-submenu v-for="(item1,index1) in menuList" :key="index1"
                    :index="'sub'+index1">
          <template slot="title">
            <span class="iconfont" :class="item1.icon"></span>  
            <span style="margin-left: 10px;">{{item1.title}}</span>
          </template>
          <el-menu-item v-for="(item,index) in item1.menu"
                        :index="index+(index1+1)*100+'menu'"
                        :class="['label',{active:selected === index+(index1+1)*100+'menu'}] "
                        :key="index+(index1+1)*100+'menu'"
                        @click="linkTab(index1,index)">
            <span>{{ item.title }}</span>
            <!-- <i class="el-icon-right"></i> -->
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>
</template>

<script>
export default {
  name: 'leftMenu',
  data() {
    return {
      title:'业务办理',
      menuList: [],
      menuList1:[
        {
          title: '船期计划',
          name: 'businessProcessing',
          icon:'icon-database',
          menu: [
            {
              title: '件散货船期',
              name: 'addPlan',
              query: {
                scdType: 'BULK_CARGO',
              },
            },
            {
              title: '集装箱船期',
              name: 'addPlan',
              query: {
                scdType: 'CONTAINER',
              },
            },
          ],
        },
        {
          title: '集装箱业务',
          name: 'businessProcessing',
          icon:'icon-database',
          menu: [
            {
              title: '提重返空',
              name: 'bulkCargoH',
            },
            {
              title: '提空返重（不指定箱号）',
              name: 'bulkCargoL',
            },
            {
              title: '提空返重（指定箱号）',
              name: 'bulkCargoLB',
            },

            {
              title: '进空箱',
              name: 'bulkCargoJk',
            },
            {
              title: '进重箱',
              name: 'bulkCargoJz',
            },
            {
              title: '提重箱',
              name: 'bulkCargoTz',
            },

            {
              title: '提空箱(指定箱号)',
              name: 'bulkCargoTkp',
            },
            {
              title: '提空箱 (不指定箱号)',
              name: 'bulkCargoLB',
            },
            {
              title: '集装箱-外集卡车队车辆计划',
              name: 'bulkCargoLB',
            },
            {
              title: '折箱',
              name: 'bulkCargoLB',
            },
            {
              title: '装箱(指定箱号)',
              name: 'bulkCargoLB',
            },
            {
              title: '装箱(不指定箱号)',
              name: 'bulkCargoLB',
            },
          ],
        },
        {
          title: '件散货业务',
          name: 'goodContent',
          icon:'icon-database',
          menu: [
            {
              title: '卸船直提',
              name: 'jUnloadLift',
              query: {
                type: 'XCZT_G',
              },
            },
            {
              title: '卸船入库',
              name: 'jUnloadIn',
              query: {
                type: 'XCRK_G',
              },
            },
            {
              title: '装船直装',
              name: 'jLoadLift',
              query: {
                type: 'ZCZZ_G',
              },
            },
            {
              title: '装船出库',
              name: 'jLoadIn',
              query: {
                type: 'ZCCK_G',
              },
            },
            {
              title: '进货',
              name: 'jImport',
              query: {
                type: 'JH_G',
              },
            },
            {
              title: '提货',
              name: 'jOutput',
              query: {
                type: 'TH_G',
              },
            },
          ],
        },
       
        // {
        //   title:'散货业务',
        //   name:'sBusinessProcessing',
        //   menu:[
        //     {
        //       title:'卸船直提',
        //       name:'sUnloadLift',
        //     },
        //     {
        //       title:'卸船入库',
        //       name:'sUnloadIn'
        //     },
        //     {
        //       title:'装船直装',
        //       name:'sLoadLift'
        //     },
        //     {
        //       title:'装船出库',
        //       name:'sLoadIn'
        //     },
        //   ]
        // },

        /*

        {
          title:'船/场业务',
          name:''
        },
        {
          title:'场/船业务',
          name:''
        },
        {
          title:'拆箱业务',
          name:''
        },
        {
          title:'提重箱业务',
          name:''
        },
        {
          title:'提空箱业务',
          name:''
        },
        {
          title:'装箱业务',
          name:''
        },
        {
          title:'进重箱业务',
          name:''
        },
        {
          title:'进空箱业务',
          name:''
        },*/
      ],
      menuList2:[
        {
          title: '我的委托',
          name: 'businessProcessing',
          icon:'icon-dingdan2',
          menu: [
            {
              title: '船期计划',
              name: 'shipPlanList',
            },
            {
              title: '件散货委托',
              name: 'jGoods',
            },
            {
              title: '集装箱委托',
              name: '',
              query: {
                scdType: 'CONTAINER',
              },
            },
            {
              title: '车队计划',
              name: '',
            },
          ],
        },
        {
          title: '消息中心',
          name: 'messageCenter',
          icon:'icon-xiaoxizhongxin',
          menu: [
            {
              title: '我的消息',
              name: 'message',
            },
          ],
        },
        {
          title: '安全中心',
          name: 'goodContent',
          icon:'icon-anquanzhongxin',
          menu: [
            {
              title: '账号安全',
              name: '',
            },
          ],
        },
        {
          title: '资料中心',
          name: 'goodContent',
          icon:'icon-dingdan2',
          menu: [
            {
              title: '个人信息',
              name: '',
            },
          ],
        },
        {
          title: '场存动态',
          name: 'goodContent',
          icon:'icon-dingdan1',
          menu: [
            {
              title: '场存明细',
              name: '',
            },
          ],
        },
      ],
      selected: '',
    }
  },
  props:{
    myIndex:'',
  },
  mounted() {
    this.getTab()
  },
  watch:{
    '$route'(){
      this.getTab()
    }
  },
  methods: {
    getTab() {
      this.menuList=this.menuList1
      let name = this.$route.name
      //console.log
      this.menuList2.forEach(item=>{
        item.menu.forEach(item1=>{
          if(name===item1.name){
            // console.log(888)
            // console.log(name)
            this.title='个人中心'
            this.menuList=this.menuList2
          }
        })
      })
      // if(2===this.myIndex){
      //   this.title='个人中心'
      //   this.menuList=this.menuList2
      // }
      console.log(this.$route.name)
      console.log(8888)
      //console.log(this.menuList)
      let that = this
      this.menuList.forEach((item1, index1) => {
        //console.log(item.name)
        item1.menu.forEach((item, index) => {
          console.log(item.name)
          if (that.$route.name === item.name) {
            that.linkTab(index1, index)
          }
          if (that.$route.query.path === item.name) {
            that.goTab(index1, index)
          }
        })
      })
    },
    goTab(e1, e) {
      //console.log(this.menuList[e])
      //this.selected=e
      this.$refs.menu.open('sub' + e1)
      this.selected = (e1 + 1) * 100 + e + 'menu'
    },
    linkTab(e1, e) {
      console.log(this.menuList[e1].menu[e])
      this.goTab(e1, e)
      this.$router.push({
        name: this.menuList[e1].menu[e].name,
        query: this.menuList[e1].menu[e].query,
      })
      this.$forceUpdate()
      console.log(this.selected)
    },
  },
}
</script>

<style scoped lang="less">
.leftMenu {
  width: 215px;
  min-height: 755px;
  background-color: white;
  position: relative;
  overflow: hidden;
  .top{
    //width: 200px;
    height: 47px;
    background: #E4E4E4;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .label {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    cursor: pointer;
    i {
      display: none;
    }
  }
  .active {
    color: #0f47b8;
    i {
      display: inherit;
    }
  }
  .tip {
    position: absolute;
    top: 0px;
    left: 22px;
  }
  .titleBox {
    margin-top: 5px;
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 20px;
    .title {
      font-size: 16px;
    }
    .des {
      font-size: 16px;
      transform: scale(0.5, 0.5);
    }
  }
}
/deep/ .el-menu-item.is-active {
  background: #0F47B8!important;
}
</style>
